<!-- src/views/AccountCenter/Address.vue -->
<template>
    <div class="address-container">
      <!-- 标题和操作按钮 -->
      <div class="address-header">
        <h2 class="page-title">地址管理</h2>
        <button class="create-button">
          <span>+ 创建新地址</span>
        </button>
      </div>
  
      <!-- 空状态 -->
      <div class="empty-container">
        <div class="empty-content">
          <svg class="empty-icon" viewBox="0 0 48 48" fill="none">
            <path d="M42 16v26H6V16l18-12 18 12zM24 22v12M18 22h12" stroke="#999" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <p class="empty-text">暂无记录</p>
        </div>
      </div>
  
      <!-- 地址列表 (示例结构) -->
      <!-- <div class="address-list">
        <div class="address-item">
          <div class="address-info">
            <span class="user-name">张三</span>
            <span class="phone">13800138000</span>
            <p class="detail">北京市朝阳区大麦路123号</p>
          </div>
          <div class="address-actions">
            <button class="action-btn">编辑</button>
            <button class="action-btn delete">删除</button>
          </div>
        </div>
      </div> -->
    </div>
  </template>
  
  <script setup>
  // 后续可添加数据请求逻辑
  </script>
  
  <style scoped>
  .address-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
  
  .page-title {
    font-size: 18px;
    color: #333;
    margin: 0;
  }
  
  .create-button {
    background: #230303;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s;
    
  }
  
  .empty-container {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .empty-content {
    text-align: center;
  }
  
  .empty-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }
  
  .empty-text {
    color: #999;
    font-size: 14px;
    margin: 0;
  }
  
  /* 地址列表样式示例 */
  .address-list {
    border: 1px solid #eee;
    border-radius: 4px;
  }
  
  .address-item {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .address-info {
    flex: 1;
  }
  
  .user-name {
    font-weight: 500;
    margin-right: 15px;
  }
  
  .phone {
    color: #666;
  }
  
  .detail {
    color: #666;
    margin: 8px 0 0;
  }
  
  .address-actions {
    display: flex;
    gap: 15px;
  }
  
  .action-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    
    &.delete {
      color: #ff4081;
      border-color: #ff4081;
    }
  }
  </style>